<script setup lang="js">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, reactive, onMounted } from "vue";
// import upload from "@iconify-icons/ep/upload";
// import cancel from "@iconify-icons/ri:cancel";
const props = defineProps({
  formInline: {
    type: {
      type: String,
      default: "file"
    },
    id: {
      type: String,
      default: ""
    },
    tagName: {
      type: String,
      default: ""
    },
    parentId: {
      type: String,
      default: "0"
    },
    width: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: ""
    },
    canvasPicUrl: {
      type: String,
      default: ""
    },
    bgImgFileName: {
      type: String,
      default: ""
    },
    bgImgPrint: {
      type: String,
      default: "no"
    },
    backgroundImageBase4: {
      type: String,
      default: ""
    }
  }
});

const ruleFormRef = ref();
const rules = reactive({
  tagName: [{ required: true, message: "文件名称必填", trigger: "blur" }],
  width: [
    { required: true, message: "请填写宽度", trigger: "blur" },
    {
      message: "宽度必须大于0",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (value <= 0) {
          callback(new Error("宽度必须大于0"));
        } else {
          callback();
        }
      }
    },
    {
      message: "宽度必须为数字",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (isNaN(value)) {
          callback(new Error("宽度必须为数字"));
        } else {
          callback();
        }
      }
    }
  ],
  height: [
    { required: true, message: "请填写高度", trigger: "blur" },
    {
      message: "高度必须大于0",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (value <= 0) {
          callback(new Error("高度必须大于0"));
        } else {
          callback();
        }
      }
    },
    {
      message: "高度必须为数字",
      trigger: "blur",
      validator: (rule, value, callback) => {
        if (isNaN(value)) {
          callback(new Error("高度必须为数字"));
        } else {
          callback();
        }
      }
    }
  ]
});
const fileList = ref([]);
const newFormInline = ref(props.formInline);
const beforeUpload = file => {
  //限制大小为3M
  const isLt3M = file.size / 1024 / 1024 < 3;
  if (!isLt3M) {
    return this.$message.error("上传图片大小不能超过 3MB!");
  }
  //将图片转为base64
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = e => {
    newFormInline.value.backgroundImageBase4 = e.target.result;
  };
  newFormInline.value.bgImgFileName = file.name;
  return false;
};

const handleCancel = () => {
  newFormInline.value.bgImgFileName = "";
  newFormInline.value.backgroundImageBase4 = "";
};
function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="rules"
    label-width="82px"
  >
    <el-form-item label="文件名称" prop="tagName">
      <el-input v-model="newFormInline.tagName" placeholder="请输入文件名称" />
    </el-form-item>
    <el-form-item label="宽度" prop="width">
      <el-input v-model="newFormInline.width" placeholder="请输入宽度">
        <template #append>mm</template>
      </el-input>
    </el-form-item>
    <el-form-item label="高度" prop="height">
      <el-input v-model="newFormInline.height" placeholder="请输入高度">
        <template #append>mm</template>
      </el-input>
    </el-form-item>
    <el-form-item label="背景图片">
      <template #default>
        <div class="flex items-center w-[calc(100%)]">
          <el-input
            v-model="newFormInline.bgImgFileName"
            :disabled="true"
            style="width: 90%"
          >
            <template #append>
              <el-upload
                v-model:file-list="fileList"
                :limit="1"
                :show-file-list="false"
                :before-upload="beforeUpload"
              >
                <el-button type="primary">上传</el-button>
              </el-upload>
            </template>
          </el-input>
          <el-button plain @click="handleCancel">取消</el-button>
        </div>
      </template>
    </el-form-item>
    <el-form-item label-width="120px" label="是否打印背景图">
      <el-radio-group v-model="newFormInline.bgImgPrint">
        <el-radio value="yes">是</el-radio>
        <el-radio value="no">否</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
